<template>
  <div class="message-bg">
    <div v-if="loaded" class="message-card">
      <split-pane
          split="vertical"
          @resize="resizeSplit"
          :default-percent="defaultPercent1"
          :min-percent='20'
      >
        <template slot="paneL">
          <div>
            <div class="side-bar">
              <el-avatar :src="user.avatar">
              </el-avatar>
              <el-button plain type="warning">清除聊天记录</el-button>
            </div>
            <div class="list-container contact-list">
            <div
                v-for="(item, index) in contact.contactList"
                :key="item.userId"
                @click="selectItem(item.userId)"
                :class="{ 'selected': selectedIndex === item.userId }"
                class="list-item"
            >
              <el-avatar :src="item.avatar">
              </el-avatar>
              {{ item.userName }}
            </div>
          </div>
          </div>

        </template>
        <template slot="paneR">
<!--     索引从小到大     -->
          <div v-infinite-scroll="load"
                   class="infinite-list"
                   style="overflow: auto; display: flex; flex-direction: column-reverse;">
            <div v-for="item in contact.messageList[selectedIndex]" class="message">
              <MessageBubble style="flex: 1" :is-me="true">{{item.content}}</MessageBubble>
              <el-avatar :src="this.user.avatar"></el-avatar>
            </div>
          </div>
        </template>
      </split-pane>
    </div>
    <el-skeleton v-else animated :rows="5" style="margin: 5rem auto" />
  </div>
</template>

<script>
import splitPane from 'vue-splitpane'
import MessageBubble from "@/components/MessageBubble.vue";
import {apiGetMessageBy2Id, apiGetUserById} from "@/api/api";

const empty = {
    "contactList" : {},
    "messageList" : {}
};

export default {
  props: ['userId'], // 直接从 props 获取
  components : {
    MessageBubble,
    splitPane
  },
  async created() {
    // 安全加载用户
    const userData = localStorage.getItem("user");
    this.user = userData ? JSON.parse(userData) : null;
    this.selectedIndex = this.userId;
    if (!this.selectedIndex) {
      return
    }

    console.log(this.user)
    this.loaded = true;
  },
  data() {
    return{
      loaded : false,
      user:null,
      defaultPercent1 : 30,
      // 聊天内容
      contact: {
        contactList :
            {
            '-580071423': {userId: -580071423, userName: '用户1', avatar: ""},
              2: {userId: 2, userName: '用户2', avatar: ""},
            },
          messageList : {
            '-580071423' : [], // 对应后端message类
            2 : []
          }
      },

      selectedIndex: null // 存储当前选中的索引
    }
  },
  methods: {
    load(){
      // console.log(this.contact.messageList,this.contact.messageList[this.selectedIndex], this.selectedIndex)

      if(this.contact.messageList[this.selectedIndex]){
        this.contact.messageList[this.selectedIndex].push({content: "聊天内容"})
      }
    },
    addContact(contact){

      localStorage.setItem("contactList", JSON.stringify(this.contact));
    },
    selectItem(index) {
      this.selectedIndex = index;
      // 如果需要获取选中的项目数据
      const selectedItem = this.items[index];
      // console.log('选中:', selectedItem);
    },
    resizeSplit(val){
      this.defaultPercent1 = val
    }
  }
}
</script>

<style scoped lang="less">
.infinite-list{
  height: 100%;
}
.message{
  display: flex;
  align-items: start;
  justify-content: right;
  width: 100%;
  flex-shrink: 0;
}
.contact-list{
  padding-right: 0;
  margin-right: 0;
}
.message-bg{
  height: 100%;
  background: url("@/assets/bg/bg.png") center;
  background-size: cover;
  overflow: auto;
  padding: 0 1rem;
}
.message-card{
  border: 2px solid #409EFF;
  padding: 1rem;
  //text-shadow: 2px 2px 6px white;
  background: rgba(255, 255, 255, 0.8) !important; /* 半透明背景（可调整透明度） */
  backdrop-filter: blur(10px); /* 背景模糊效果（数值越大越模糊） */
  border-radius: 10px;
  height: 90%;
  margin: 2rem auto;
  max-width: 1300px;
}
/* 分割面板容器样式 */
.split-pane {
  flex: 1;
  display: flex;
  position: relative;
}
.side-bar{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.list-item {
  background: white;
  padding: 10px 15px;
  margin: 0;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: start;
  gap: 1rem;
  border-radius: 3px;
}

.list-item:hover {
  background-color: #f5f5f5;
}

.list-item.selected {
  background-color: #e3f2fd;
  border-color: #2196f3;
  color: #2196f3;
}
</style>